<template>
  <div>
    <city-header></city-header>
    <city-search></city-search>
    <city-list :hotCities="hotCities" :cities="cities" :letter="letter"></city-list>
    <city-alphabet @change="letterChange" :cities="cities"></city-alphabet>
  </div>
</template>

<script>
  import axios from "axios"
  import CityHeader from "./components/header.vue"
  import CitySearch from "./components/search.vue"
  import CityList from "./components/list.vue"
  import CityAlphabet from "./components/alphabet.vue"
  export default {
    name: "City",
    components: {
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet
    },
    data () {
      return {
        hotCities: [],
        cities: {},
        letter: ''
      }
    },
    methods: {
      getInfo () {
        axios.get("/api/city.json").then(res => {
            res = res.data
            if (res.ret && res.data) {
              const data = res.data
              this.hotCities = data.hotCities
              this.cities = data.cities
            }
        })
      },
      letterChange (letter) {
        this.letter = letter
      }
    },
    mounted () {
      this.getInfo()
    }
  }
</script>

<style lang="stylus" scoped>

</style>
